<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');
    /*绘制网格*/

    /*1.网格的大小*/
    var gridSize = 10;

    /*2.画多少条x轴方向的线 height*/
    /*var canvasHeight = myCanvas.height;
    var canvasWeight = myCanvas.weight;
    console.log('画布的高度'+canvasHeight);
    console.log('画布的宽度'+canvasWeight);*/
    // console.log(ctx.canvas.width);
    var canvasHeight = ctx.canvas.height;
    var xLineTotal = Math.floor(canvasHeight / gridSize);
    /*3.画多少条y轴方向的线 width*/
    var canvasWidth = ctx.canvas.width;
    var yLineTotal = Math.floor(canvasWidth / gridSize);
    /*4.遍历的形式去绘制*/
    for (var i = 0; i < xLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(0, i * gridSize - 0.5);
        ctx.lineTo(canvasWidth, i * gridSize - 0.5);
        ctx.strokeStyle = 'blue';
        ctx.stroke();
    }
    for (var i = 0; i < yLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(i * gridSize - 0.5, 0);
        ctx.lineTo(i * gridSize - 0.5, canvasHeight);
        ctx.strokeStyle = 'blue';
        ctx.stroke();
    }

</script>
</body>
</html>
